import React, { Fragment } from "react";
import { Button, Space } from "antd";
import { useTranslation } from "react-i18next";
import { NAVBAR_WORDS } from "../../../constant";
import { useNavigate } from 'react-router-dom';
import { useIdentity } from "../../../hooks/useIdentity";

const RegisterButton: React.FC = () => {
  const {t, i18n} = useTranslation();
  const [identity, username, onUnLogin] = useIdentity();
  const navigate = useNavigate();
  const onClick = (to: string) => {
    if(to === NAVBAR_WORDS.LOGIN) {
      navigate('/login')
    } else if(to === NAVBAR_WORDS.REGISTER) {
      navigate('/register')
    }
  }

  const userInfo = (
    <Fragment>
      <span style={{color: 'white'}}>{username as string}</span>\
      <Button onClick={() => {
        if(onUnLogin && onUnLogin instanceof Function) {
          onUnLogin();
        }
      }}>注销</Button>
    </Fragment>
  )
  return (
    <Space size={8}>
      { identity ? (userInfo) : (
        <Fragment>
          <Button onClick={() => onClick(NAVBAR_WORDS.LOGIN)}>{t(NAVBAR_WORDS.LOGIN)}</Button>
          <Button onClick={() => onClick(NAVBAR_WORDS.REGISTER)}>{t(NAVBAR_WORDS.REGISTER)}</Button>
        </Fragment>
      )}
    </Space>
  )
}

export default RegisterButton;